<template>
	<div class="endLive" @click="closeMask">
		<div class="endLiveCont">
			<div class="bjImg">
				<image src="@/static/image/userBj.png" mode="" class=""></image>
			</div>

			<div class="endLiveCenter">
				<div class="endLiveCont_back">
					<!-- <image src="@/static/image/left.png" mode="" class="endLiveCont_back_img"></image> <span>用户列表</span> -->
					<u-navbar leftText="用户列表" @leftClick="appFinish" leftIconColor="#1D2129" bgColor="transparent">
					</u-navbar>


					<div class="useLable" @click.stop='userTagEvent()'>
						<image src="@/static/image/hex.png" mode="" />
						用户标签
					</div>
				</div>

			</div>
		</div>

		<div class="scrollViewTop">
			<div class="userData">
				<div class="userData_top">
					观众总数量：{{ AudienceCount.allAudienceCount }}
				</div>
				<div class="userData_cont">
					<div class="userData_cont_items" @click="tabChange({ index: 1, status: 'todayAdd' })">
						<div class="userData_cont_items_top">
							{{ AudienceCount.todayAddCount }}
						</div>
						<div class="userData_cont_items_bottom">
							今日新增
						</div>
					</div>
					<div class="userData_cont_items" @click="tabChange({ index: 2, status: 'active' })">
						<div class="userData_cont_items_top">
							{{ AudienceCount.activeCount }}
						</div>
						<div class="userData_cont_items_bottom">
							活跃用户
						</div>
					</div>
					<div class="userData_cont_items noTop" @click="tabChange({ index: 3, status: 'intention' })">
						<div class="userData_cont_items_top">
							{{ AudienceCount.intentionCount }}
						</div>
						<div class="userData_cont_items_bottom">
							购买意向人数
						</div>
					</div>
					<div class="userData_cont_items noTop" @click="tabChange({ index: 4, status: 'repurchase' })">
						<div class="userData_cont_items_top">
							{{ AudienceCount.repurchaseCount }}
						</div>
						<div class="userData_cont_items_bottom">
							复购人数
						</div>
					</div>
				</div>
			</div>

			<div class="prizeDraw_top_search">
				<!-- arrow-down-fill  -->
				<div class="prizeDraw_top_search_top" @click.stop='isUserDown = !isUserDown'>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 0">用户昵称</div>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 1">手机号码</div>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 2">用户标签</div>
					<u-icon name="arrow-down-fill" color="#A9A9A9" size="8" v-if="!isUserDown"></u-icon>
					<u-icon name="arrow-up-fill" color="#A9A9A9" size="8" v-else></u-icon>
				</div>

				<div class="prizeDraw_top_title">
					<input type="text" :placeholder="isUserLableDown ? '' : userDownPlace" v-model="params.nickname"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled" @search='userLableDownSearch'
						@confirm='userLableDownSearch' v-if='userDownIndex == 0'>
					<input type="text" :placeholder="isUserLableDown ? '' : userDownPlace" v-model="params.mobile"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled" @search='userLableDownSearch'
						@confirm='userLableDownSearch' v-if='userDownIndex == 1'>

					<div class="prizeDraw_top_icon" v-if='userDownIndex == 2'>
						<u-icon name="arrow-down" color="#A9A9A9" size="14" v-if="!isUserLableDown"></u-icon>
						<u-icon name="arrow-up" color="#A9A9A9" size="14" v-else></u-icon>
					</div>

					<div class="prizeDraw_top_cont" v-if='userDownIndex == 2' @click.stop="userDownDisabledEvent">
						<div class="prizeDraw_top_cont_scroll">
							<span v-if="closeLableList.length <= 0">
								{{ userDownPlace }}
							</span>
							<div class="prizeDraw_top_cont_items" v-for="(ite, idx) in closeLableList" :key="idx" v-else>
								<div class="prizeDraw_top_cont_items_name" @click.stop='closeItems(ite, idx)'>
									{{ ite }}
								</div>
								<div class="prizeDraw_top_cont_items_name_icon" @click.stop='closeItems(ite, idx)'>
									<u-icon name="close" color="#0D0D0D" size="10"></u-icon>
								</div>
							</div>
						</div>
					</div>
					<div class="inputSeach" @click.stop='couponEvent()' v-if='userDownIndex != 2'>
						<image src="@/static/image/sousuo.png" mode=""></image>
					</div>

				</div>
				<!-- 	<div class="inputSeachText">
					搜索
				</div> -->
			</div>
			<!--  -->
			<div class="u-tabs-box">
				<u-tabs :list="userTabList" lineWidth="26" :current="activeIndex" lineHeight="2" lineColor="#295FFF"
					:activeStyle="{
						color: '#295FFF',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
	color: '#8F969E',
	transform: 'scale(1)'
}" @click='tabChange'>
				</u-tabs>
			</div>
		</div>
		<!-- lable -->
		<div class="u-tabs-box-down" v-if="isUserDown">
			<div :class="userDownIndex == idx ? 'u-tabs-box-down-items u-tabs-box-down-items-act' : 'u-tabs-box-down-items'"
				v-for="(ite, idx) in userDownList" :key="idx" @click.stop='closeUserDown(ite, idx)'>
				{{ ite.name }}
			</div>
		</div>
		<!-- 标签 -->
		<div class="userLableDown" v-if="isUserLableDown" @touchmove.stop @touch.stop>
			<u-checkbox-group v-model="TagName" placement="column" @change="checkboxChange">
				<div class="userLableDownBox">
					<u-checkbox :customStyle="{ marginBottom: '16px' }" v-for="(item, index) in TagList" :key="index"
						:label="item.name" :name="item.tagId">
					</u-checkbox>
				</div>
			</u-checkbox-group>
			<div class="userLableDown_btn" @click='userLableDownSearch'>
				搜索
			</div>
		</div>
		<scroll-view @scrolltolower="scrolltolower" class="scrollView" :scroll-y="true" :scroll-with-animation="true">
			<div class="liveUserItems" v-for="(ite, idx) in AnalyzeListAudience" :key="idx">
				<div class="liveUserItems_top">
					<div class="liveUserItems_top_left">
						<u-avatar :src="ite.avatar" mode=""></u-avatar>
					</div>
					<div class="liveUserItems_top_right">
						<div class="liveUserItems_top_right_title ex">
							{{ ite.nickname || '游客' }}

						</div>
						<div class="liveUserItems_top_right_price">
							消费金额：<span>{{ ite.amount | amountFilter }}元</span>
						</div>
					</div>
				</div>
				<div class="liveUserItems_top_right_time">
					<div>
						最近浏览时间：{{ ite.updateTime }}
					</div>
					<div>
						手机号码：{{ ite.mobile || '-' }}
					</div>
				</div>
				<div class="liveUserItems_top_right_time">
					首次加入时间：{{ ite.createTime }}
				</div>
				<div class="liveUserItems_bottom">
					<div class="liveUserItems_bottom_lable_title">
						标签：
					</div>
					<div class="liveUserItems_bottom_lable_items_cont">
						<!--  ite.tagNames  :style="{'background':items.tagBg}"-->
						<div class="liveUserItems_bottom_lable_items" :style="{ 'background': items.tagBg }"
							v-for='(items, index) in ite.tagNames' :key="index">
							<!-- :style="{'color':ite.tagBg}" -->
							<span :style="{ 'color': items.tagTextColor }">{{ items.name }}</span>
						</div>
					</div>
				</div>
				<!-- 操作 -->
				<div class="liveUserItems_cz">
					<div class="liveUserItems_cz_left">
						<div class="liveUserItems_cz_items" @click='addLabel(ite)'>
							<div class="liveUserItems_cz_items_top">
								<image src="@/static/image/user/lable.png" mode=""></image>
							</div>
							<div class='liveUserItems_cz_items_bottom'>
								贴标签
							</div>
						</div>

						<div class="liveUserItems_cz_items" @click='bannedEvnet(ite)' v-if="ite.blockStatus === 1">
							<div class="liveUserItems_cz_items_top">
								<image src="@/static/image/user/jf.png" mode=""></image>
							</div>
							<div class='liveUserItems_cz_items_bottom color_blue'>
								解封
							</div>
						</div>
						<div class="liveUserItems_cz_items" @click='bannedEvnet(ite)' v-else>
							<div class="liveUserItems_cz_items_top">
								<image src="@/static/image/user/remake.png" mode=""></image>
							</div>
							<div class='liveUserItems_cz_items_bottom'>
								封禁
							</div>
						</div>


					</div>

					<div class="liveUserItems_cz_right" @click='userDetailEvnet(ite)'>
						<image src="@/static/image/user/right.png" mode=""></image>
					</div>

				</div>
			</div>
			<div class="listSpace" v-if="AnalyzeListAudience.length <= 0 && loading">
				<list-space></list-space>
			</div>

			<div class="zj_space">

			</div>

		</scroll-view>

		<!-- 贴标签弹窗 -->
		<lables :selectArr='TagList' v-if='isLablesShow' popTitle='选择标签' @closePop='closePop' @confirmPop='confirmPop'
			:toaskUserInfo="toaskUserInfo">
		</lables>
		<!-- 封禁弹窗 -->
		<toastMask toaskTitle='封禁' @toastClose='toastClose' v-if="isToastShow" :toaskUserInfo="toaskUserInfo"
			@toastIndustry='toastIndustry'></toastMask>

	</div>
</template>

<script>
import lables from './components/lable.vue'
import toastMask from './components/toastMask.vue'
export default {
	components: {
		lables,
		toastMask
	},
	filters: {
		formatDate(v) {
			if (v == 0) {
				return '-'
			}
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		},
		formatTime(v) {
			if (v == 0) {
				return '-'
			}
			let hours = Math.floor(v / 3600);
			let minutes = Math.floor((v % 3600) / 60);
			let seconds = v % 60;
			const formattedTime = `${hours}:${minutes}:${seconds}`;
			return formattedTime;
		},
		amountFilter(v) {
			if (!v) return '0.00'
			return Number(v) / 100
		}
	},
	data() {
		return {
			params: {
				dataType: "all",
				nickname: "",
				page: 1,
				pageSize: 10,
				tagIds: [],
				nickname: '',
				mobile: ""
			},
			AnalyzeListAudience: [],
			AudienceCount: [], //观众数据
			total: 0,
			loading: false,
			isUserDown: false,
			userDownList: [{
				name: '用户昵称',
				status: 'all'
			},
			{
				name: '手机号码',
				status: 'all'
			},
			{
				name: '用户标签',
				status: 'all'
			}
			],
			userDownIndex: 0,
			userDownPlace: "请输入用户名称",
			TagList: [],
			userDownDisabled: false,
			isUserLableDown: false,
			checkboxList1: [{
				name: '苹果',
				disabled: false
			},
			{
				name: '香蕉',
				disabled: false
			},
			{
				name: '橙子',
				disabled: false
			}
			],
			TagName: [],
			userTabList: [{
				name: '全部',
				status: 'all'
			}, {
				name: '今日新增',
				status: 'todayAdd'

			}, {
				name: '活跃用户',
				status: 'active'
			}, {
				name: '意向用户',
				status: 'intention'
			}, {
				name: '复购用户',
				status: 'repurchase'
			}],
			closeLableList: [], //选择lable
			isLablesShow: false, //标签弹窗
			userId: '',
			isToastShow: false, //是否关闭
			toaskUserInfo: '', //用户信息
			userBlockStatus: '',
			projectVersion: '',//1-2测试版本
			activeIndex: 0
		}
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.AnalyzeListAudience = []
		this.loading = false
		this.getAnalyzeListAudience()
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = opt.liveId
		}
		this.getAnalyzeListAudience()
		this.getAudienceCountFun()
		this.getTagList() //获取标签
		this.getLiveInfo()
	},
	methods: {
		// 全局关闭
		closeMask() {
			this.isUserLableDown = false
			this.isUserDown = false
		},
		async getLiveInfo() {
			const {
				data
			} = await this.$request(this.$Api.orgGet, { liveId: this.params.liveId }, "get")
			if (data.code != 200) return
			this.projectVersion = data.data.projectVersion
			console.log('rr', data)
		},
		appFinish() {
			this.$utils.appFinish(this)
		},
		// 点击搜索
		userLableDownSearch() {
			this.params.page = 1
			this.AnalyzeListAudience = []
			this.loading = false
			this.isUserDown = false
			this.isUserLableDown = false
			this.getAnalyzeListAudience()
		},
		// 关闭标签
		closeItems(ite, idx) {
			this.closeLableList.splice(idx, 1)
			if (!this.isUserLableDown) this.isUserLableDown = true
			this.TagName.splice(idx, 1)
		},
		userDownDisabledEvent() {
			if (this.userDownIndex == 2) {
				this.isUserLableDown = !this.isUserLableDown
				this.isUserDown = false
			}
		},
		// 选择封禁
		bannedEvnet(ite) {
			this.toaskUserInfo = ite
			this.userId = ite.customerId
			this.userBlockStatus = ite.blockStatus
			this.isToastShow = true
		},
		// 查看详情
		userDetailEvnet(ite) {
			uni.navigateTo({
				url: '/pages/userList/userDetail' + "?customerId=" + ite.customerId
			})
		},
		// 
		checkboxChange(e) {
			console.log(e, this.TagName)
			// 整合选中类别
			this.params.tagIds = e
			this.zhChangeList()
		},
		zhChangeList() {
			var arr = []
			for (var i in this.TagList) {
				for (var k in this.params.tagIds) {
					if (this.TagList[i].tagId == this.params.tagIds[k]) {
						arr.push(this.TagList[i].name)
					}
				}
			}
			this.closeLableList = arr
		},
		// 选择搜索属性
		closeUserDown(ite, idx) {
			this.isUserDown = false
			this.isUserLableDown = false
			this.userDownIndex = idx
			this.params = {
				dataType: "all",
				nickname: "",
				page: 1,
				pageSize: 10,
				tagIds: [],
				nickname: '',
				mobile: ""
			}
			if (idx == 0) {
				this.userDownPlace = '请输入用户名称'
				this.userDownDisabled = false
			} else if (idx == 1) {
				this.userDownPlace = '请输入手机号码'
				this.userDownDisabled = false
			} else if (idx == 2) {
				this.userDownPlace = '下拉选择用户标签'
				this.userDownDisabled = true
			}
			this.AnalyzeListAudience = []
			this.loading = false
			this.getAnalyzeListAudience()
		},
		tabChange(e) {
			this.params = {
				dataType: "all",
				nickname: "",
				page: 1,
				pageSize: 10,
				tagIds: [],
				nickname: '',
				mobile: ""
			}
			this.activeIndex = e.index
			this.params.dataType = e.status
			this.userDownIndex = 0
			this.userDownPlace = "请输入用户名称",
				this.AnalyzeListAudience = []
			this.loading = false
			this.getAnalyzeListAudience()
			console.log('tabChangetabChange', e, this.activeIndex)
		},
		couponEvent() {
			this.$utils.throttle((res) => {
				this.params.page = 1
				this.AnalyzeListAudience = []
				this.loading = false
				this.getAnalyzeListAudience()
			}, 800)
		},
		// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
		scrolltolower(e) {
			if (this.AnalyzeListAudience.length < this.total) {
				this.params.page++
				this.getAnalyzeListAudience()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
			console.log('e.detail.scrollTop', e.detail.scrollTop)
		},
		// 获取观众数据
		async getAudienceCountFun() {
			const {
				data
			} = await this.$request(this.$Api.getAudienceCount, {}, "get")
			this.loading = true
			if (!data.data) return
			this.AudienceCount = data.data
			this.total = data.total
			uni.stopPullDownRefresh()
		},
		// 获取观众列表
		async getAnalyzeListAudience() {
			const {
				data
			} = await this.$request(this.$Api.getAnalyzeListAudience, this.params, "post")
			if (data.code != 200) return
			this.loading = true
			if (!data.data) return
			this.AnalyzeListAudience = this.AnalyzeListAudience.concat(data.data)
			this.total = data.total
			uni.stopPullDownRefresh()
		},
		// getTagList
		async getTagList() {
			const {
				data
			} = await this.$request(this.$Api.tagList, {}, "get")
			if (data.code != 200) return
			this.loading = true
			if (!data.data) return
			for (var i in data.data.list) {
				data.data.list[i].status = false
			}
			this.TagList = data.data.list
		},
		backBtn() {
			uni.navigateBack()
		},
		// 选中用户贴标签
		addLabel(ite) {
			this.toaskUserInfo = ite
			// 判断用户已经选中的标签
			const arr = []
			this.userId = ite.customerId
			for (var i in this.TagList) {
				this.TagList[i].status = false
				for (var k in ite.tagNames) {
					if (ite.tagNames[k].tagId == this.TagList[i].tagId) {
						arr.push(i)
					}
				}
			}
			for (var i in arr) {
				this.TagList[arr[i]].status = true
			}
			this.isLablesShow = true
		},
		closePop() {
			this.isLablesShow = false
		},
		toastClose() {
			this.isToastShow = false
		},
		async confirmPop(ite) {
			const {
				data
			} = await this.$request(this.$Api.tagCreat, {
				tagIds: ite,
				tagType: 1,
				userId: this.userId,
			}, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			this.isLablesShow = false
			this.params.page = 1
			this.AnalyzeListAudience = []
			this.loading = false
			this.getAnalyzeListAudience()
		},
		// 确认封禁
		async toastIndustry() {
			const {
				data
			} = await this.$request(this.$Api.updateCustomerBlocked, {
				customerId: this.userId,
				status: this.userBlockStatus === 1 ? 0 : 1
			}, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			this.isToastShow = false
			this.params.page = 1
			this.AnalyzeListAudience = []
			this.loading = false
			this.getAnalyzeListAudience()
		},
		// 用户标签
		userTagEvent() {
			// 判断版权
			if (this.projectVersion == 1 || this.projectVersion == 2) {
				return uni.showToast({
					title: '当前版本过低，如有疑问请咨询客服，客服电话:400-625-6888.',
					icon: 'none'
				})
			}
			uni.navigateTo({
				url: '/pages/userTag/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.endLive {
	width: 100%;
	height: 100vh;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	background: #FAFBFF !important;
}

.prizeDraw_top_search {
	display: flex;
	align-items: center;
	margin-top: 34rpx;

	.inputSeachText {
		width: 90rpx;
		height: 48rpx;
		background: #295FFF;
		border-radius: 8rpx;
		color: #fff;
		text-align: center;
		margin-left: 50rpx;
		font-size: 24rpx;
		line-height: 48rpx;
	}

	.prizeDraw_top_search_top {
		width: 140rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		float: right;

		.prizeDraw_top_search_top_title {
			min-width: 115rpx;
		}

		span {
			margin-right: 6rpx;
		}
	}

	.prizeDraw_top_title {
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 500;
		line-height: 64rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 32rpx;
		width: 522rpx;
		height: 64rpx;
		border-radius: 32rpx;
		position: relative;

		input {
			width: 522rpx;
			height: 64rpx;
			border-radius: 32rpx;
			padding: 0 24rpx 0 74rpx;
			border: 1rpx solid #D7DDE4;
			box-sizing: border-box;
			font-size: 24rpx;

		}

		.inputSeach {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			left: 54rpx;
			top: 6rpx;
		}

		.prizeDraw_top_icon {
			position: absolute;
			right: 0rpx;
			top: 20rpx;
		}

		.prizeDraw_top_cont {
			width: 522rpx;
			position: absolute;
			left: 32;
			top: 0;
			height: 100%;
			// overflow: hidden;
			padding: 8rpx 74rpx 0rpx 34rpx;
			// display: flex;
			// flex-wrap: wrap;
			align-items: center;
			border: 1rpx solid #D7DDE4;
			border-radius: 32rpx;
			overflow: hidden;
	
			
			// height: 64rpx;
			.prizeDraw_top_cont_scroll{
				overflow: auto;
				width: 100%;
				display: flex;
				white-space: nowrap;
				min-width: 302rpx;
			}


			span {
				color: #BFBFBF !important;
				font-size: 28rpx !important;
				line-height: 44rpx;
			}

			// background: red;

			.prizeDraw_top_cont_items {
				// min-width: 50rpx;
				height: 48rpx;
				background: #E8EEFA;
				border-radius: 4rpx;
				padding: 0 64rpx 0 16rpx;
				position: relative;
				line-height: 48rpx;
				margin-bottom: 50rpx;
				margin-right: 12rpx;
				display: inline-block;

				.prizeDraw_top_cont_items_name {}

				.prizeDraw_top_cont_items_name_icon {
					position: absolute;
					right: 24rpx;
					top: 12rpx;
					font-weight: bold;
				}
			}
		}

	}

}

.u-tabs-box {
	padding-top: 18rpx;
	width: 100vw;
	position: relative;
	margin-left: -32rpx;
	border-bottom: 2rpx solid #E3E8EE;
	background: #fff;
	z-index: 99999;
}

.u-tabs-box-down {
	width: 100%;
	left: 0rpx;
	position: fixed;
	top: 568rpx;
	z-index: 999;
	padding: 24rpx 32rpx 0 32rpx;
	box-sizing: border-box;
	min-height: 194rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(166, 166, 166, 0.5);
	border-radius: 0rpx 0rpx 16rpx 16rpx;

	.u-tabs-box-down-items {
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}

	.u-tabs-box-down-items-btn {
		width: 522rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		border-top: 2rpx solid #E7F1FF;
	}

	.u-tabs-box-down-items-act {
		color: #295EFF;
	}
}

.userLableDown {
	position: fixed;
	top: 562rpx;
	right: 32rpx;
	width: 522rpx;
	min-height: 72rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 8rpx;
	z-index: 9;

	.userLableDown_btn {
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		border-top: 2rpx solid #E7F1FF;
		width: 100%;
		color: #295EFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.userLableDownBox {
		padding: 24rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		max-height: 500rpx;
		overflow-y: scroll;
	}
}

.scrollView_box {
	height: calc(100vh - 638rpx);
}

.scrollViewTop {
	position: absolute;
	top: 88rpx;
	width: 688rpx;
	// background: #FFFFFF;
	border-radius: 12rpx;
	margin-left: 32rpx;
	padding: 32rpx 0;
	box-sizing: border-box;
	z-index: 2;
	// margin-top: 24rpx;

}

.scrollView {
	height: calc(100vh - 648rpx);
	// background: red;
	position: absolute;
	top: 618rpx;
	width: 688rpx;
	// background: #FFFFFF;
	border-radius: 12rpx;
	margin-left: 32rpx;
	padding: 0rpx 0 0 0;
	margin-top: 32rpx;
	box-sizing: border-box;
	// padding-bottom: 500rpx;
	z-index: 3;
	box-sizing: border-box;

}

.endLiveCont {
	width: 100%;
	height: 100vh;
	position: relative;
	padding: 30rpx 0;
	box-sizing: border-box;
	color: #fff;
	overflow: hidden;



	.endLiveCenter {
		width: 100%;
		height: 1624rpx;
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 2;

	}

	.bjImg {
		width: 100%;
		min-height: 638rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: #fff;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.endLiveCont_back {
		width: 100%;
		height: 80rpx;
		float: left;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.endLiveCont_back_img {
			width: 50rpx;
			height: 50rpx;
			float: left;
			position: absolute;
			top: 15rpx;
		}

		span {
			font-size: 28rpx;
			margin-left: 60rpx;
			color: #1D2129;
			line-height: 80rpx;
		}

		.useLable {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 172rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 2rpx solid #295EFF;
			margin-right: 32rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			color: #295EFF;
			font-size: 24rpx;
			line-height: 44rpx;
			z-index: 9999;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}



}

.liveUserItems {
	width: 100%;
	min-height: 30rpx;
	// border-bottom: 2rpx solid #AEC0FE;
	padding: 28rpx 24rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top: 24rpx;

	.liveUserItems_top {
		width: 100%;
		display: flex;
		font-size: 28rpx;
		color: #1D2129;
		align-items: center;

		.liveUserItems_top_left {
			width: 76rpx;
			height: 76rpx;

			image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
			}
		}

		.liveUserItems_top_right {
			margin-left: 18rpx;
			position: relative;
			width: calc(100% - 80rpx);

			.liveUserItems_top_right_price {
				font-size: 20rpx;
				color: #657180;
				position: absolute;
				top: 0;
				color: #FF5A5F;
				right: 0;

				span {
					font-size: 28rpx;
					color: #FF5A5F;
				}
			}

			.liveUserItems_top_right_title {
				width: 200rpx;



			}

			.liveUserItems_top_right_address {
				margin-top: 8rpx;
				font-size: 20rpx;
			}


		}
	}

	.liveUserItems_top_right_time {
		margin-top: 16rpx;
		font-size: 20rpx;
		color: #657180;
		display: flex;
		align-items: center;
		justify-content: space-between;

		span {
			margin-left: 32rpx;
		}
	}

	.liveUserItems_bottom {
		font-size: 20rpx;
		color: #8C8C8C;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 12rpx 0;

		.liveUserItems_bottom_lable_title {
			min-width: 80rpx;
		}

		.liveUserItems_bottom_lable_items_cont {
			min-width: calc(100% - 120rpx);
			overflow-x: auto;
			white-space: nowrap;

			.liveUserItems_bottom_lable_items {
				padding: 0 24rpx;
				margin-right: 12rpx;
				height: 34rpx;
				// background: #00DDBA;
				border-radius: 21rpx;
				display: inline-block;
				line-height: 34rpx;
				color: #000;
				font-size: 24rpx;
				min-width: 100rpx;

				span {
					display: inline-block;
				}

			}
		}
	}

	.liveUserItems_cz {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx 0 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #E3E8EE;
		margin-top: 24rpx;
		color: #657180;
		font-size: 20rpx;
		position: relative;

		.liveUserItems_cz_left {
			display: flex;
			align-items: center;

			.liveUserItems_cz_items {
				margin-right: 64rpx;

				.liveUserItems_cz_items_top {
					width: 60rpx;
					height: 60rpx;
					margin-left: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.liveUserItems_cz_items_bottom {
					width: 80rpx;
					text-align: center;
					margin-top: 6rpx;

				}

				.color_blue {
					color: #295EFF;
				}
			}
		}

		.liveUserItems_cz_right {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.liveUserItems:last-child {
	border: none !important;
}

.userData {
	width: 100%;
	height: 302rpx;
	background: #FAFBFF;
	border-radius: 16rpx;
	margin: 20rpx auto;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	background-image: url(@/static/image/user/userTop.png);
	background-size: cover;

	.userData_top {
		font-size: 24rpx;
		color: #295EFF;
	}

	.userData_cont {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 238rpx;
		padding: 0 80rpx;
		box-sizing: border-box;

		.userData_cont_items {
			margin-top: 10rpx;
			width: 180rpx;
			text-align: center;

			.userData_cont_items_top {
				color: #1D2129;
				font-size: 36rpx;
				font-weight: 500;
				// width: 160rpx;
				text-align: center;
			}

			.userData_cont_items_bottom {
				color: #8C8C8C;
				font-size: 20rpx;
				margin-top: 8rpx;
				width: 180rpx;
				text-align: center;
			}
		}

		.noTop {
			margin-top: 0;
		}
	}
}
</style>
